<template>
  <div>
    <a-modal v-model:visible="modalVisible" title="投放时间段修改" @ok="handleOk">
      <a-select ref="select" v-model:value="selectValue" style="width: 100%">
        <a-select-option value="7*24小时">7*24小时</a-select-option>
        <a-select-option value="5*8小时">5*8小时</a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import updateTimeRange from '@/services/order/updateTimeRange'
const [, updateTimeRangeFn] = updateTimeRange()

const props = defineProps<{
  visible: boolean
  orderId: Number
  value: String
}>()
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'refresh'): void
}>()

const modalVisible = ref<Boolean>(props.visible)
const orderId = ref<Number>(props.orderId)
const selectValue = ref<String>(props.value)

watch(
  () => [props.visible, props.orderId, props.value],
  ([newVisible, orderIdValue, newValue]) => {
    modalVisible.value = newVisible
    orderId.value = orderIdValue
    selectValue.value = newValue
  },
  { immediate: true }
)
watch(modalVisible, (newVal) => {
  emit('update:visible', newVal)
})
const handleOk = (e: MouseEvent) => {
  modalVisible.value = false
  updateOrderRange()
}

const updateOrderRange = async () => {
  const [err, res] = await updateTimeRangeFn({
    orderId: orderId.value,
    timeStr: selectValue.value
  })
  if (!err) {
    message.success('修改成功')
    emit('refresh')
  } else {
    message.error(err.message)
  }
}
</script>
